import React, { Component } from 'react';
// 负责数据连接
const MyContext = React.createContext();// 上下文 环境 
// 解构出一个提供者 
const { Provider } = MyContext;
class HKContext extends Component {
  state={
    num:100
  }
  changeNum=()=>{
    this.setState({ num: 101 });
  }
  render() {
    return (
      <div>
        <Provider value={{num:this.state.num,changeNum:this.changeNum}} >
          <h1> HKContext </h1>
          <HKContext1></HKContext1>
        </Provider>
      </div>
    );
  }
}

class HKContext1 extends Component {
  render() {
    return (
      <div>
        <h2>HKContext1</h2>
        <HKContext2></HKContext2>
      </div>
    );
  }
}
class HKContext2 extends Component {
  // 通过声明一个 静态的contextType 进行接收数据
  static contextType = MyContext;
  render() {
    // console.log(this.context);
    return (
      <div>
        <h3 onClick={this.context.changeNum} >HKContext2 {this.context.num} </h3>
      </div>
    );
  }
}


export default HKContext;